<template>
  <div class="pop" v-show="opt.ifshow">
    <div class="mask-box" v-show="opt.showLoading">
      <!--loading-->
      <div class="water ub-img1">
      </div>
      <div class="loading ub-img1">
      </div>
    </div>
    <div class="txtBox" v-show="opt.showTx">
      <!--提示文字-->
      <div class="ub ub-ac ub-pc">
        <div class="textContent">{{opt.content}}</div>
      </div>
    </div>
    <div class="confirmBg ub ub-ac  ub-pc" v-show="opt.showConfirm">
      <div class="ub confirmBox ub-ver">
        <div class="ub ub-ac ub-pc">{{opt.confirmTxt}}</div>
        <div class="ub ub-pj ub-ac">
          <div class="ub ub-pc ub-ac wd_50 fc_blue" @click="confirm()">是</div>
          <div class="ub ub-ac ub-pc wd_50 fc_blue" @click='cannel()'>否</div>
        </div>
      </div>
    </div>
    <div class="ub mask" v-show="opt.showMsg">
      <div class="ub ub-pc ub-ac wd_100">
        <div class="ub showNmB ub-ver">
          <div class="ub ub-ac ub-pc title">{{opt.msgTitle}}</div>
          <div class="ub ub-pc content" v-html="opt.msgContent">
          </div>
          <div class="ub ub-ac ub-pc fblue" @click="msgConfirm()">{{opt.msgBtn}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import eventBus from 'common/eventBus.js'
import { mapState } from 'vuex';
export default {
  name: 'pop',
  data: function () {
    return {
      ifshow: false,
      showLoading: false,
      showTx: false,
      content: ''
    };
  },
  props: {
    opt: {
      type: Object
    }
  },
  computed: mapState(['pop']),
  methods: {
    cannel: function () {
      this.$store.commit('setConfirm');
    },
    confirm: function () {
      this.$store.commit('setConfirm');
      // console.log();
      if (typeof this.pop.callback === 'function') {
        this.pop.callback();
      }
      this.$store.commit('setConfirmCallBak');
    },
    msgConfirm: function () {
      this.$store.commit('setMsg');
      // console.log();
      console.log(typeof this.pop.msgCB);
      if (typeof this.pop.msgCB === 'function') {
        this.pop.msgCB();
      }
      this.$store.commit('setMsgCb');
    }
  }
}
// eventBus.$emit('onPop', [])
</script>
 
<style lang="stylus" scoped>
@import '../../stylus/base.styl';
@keyframes waterWave
  0%
    left: 0;
  50%
    left: -20px;
  100%
    left: 0;
.pop
  position: fixed;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
.mask-box
  position: absolute;
  top: 50%;
  left: 50%;
  margin: f_times(-1.875) 0 0 f_times(-1.875);
  height: f_times(3.75);
  width: f_times(3.75);
  border-radius: 50%;
  border: 2px solid rgba(100, 100, 100, 0.3);
  overflow: hidden;
.loading
  position: relative;
  height: f_times(3.75);
  width: f_times(3.75);
  background-image: url('../../img/loading_mask.png');
  z-index: 2000;
.water
  position: absolute;
  z-index: 1000;
  background-image: url('../../img/loading_wave.gif');
  width: f_times(4);
  height: f_times(1);
  bottom: f_times(1);
  left: f_times(-1.25);
  animation: waterWave 2s linear 0ms infinite;
.txtBox
  position: absolute;
  top: 50%;
  left: 0;
  height: f_times(2);
  margin-top: f_times(-1);
  width: 100%;
  z-index: 10000;
.textContent
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  word-wrap: keep-all;
  padding: f_times(0.7) f_times(1);
  border-radius: f_times(1.2);
.confirmBg
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
.confirmBox
  height: f_times(6.5);
  width: 70%;
  background-color: #fff;
  border-radius: 10px;
  >div
    height: 50%;
    >div:first-child
      border-right: 1px solid #f2f2f2;
  .fc_blue
    color: #3879D9;
    height: 100%;
    border-top: 1px solid #f2f2f2;
.mask
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
.showNmB
  position: relative;
  // top: 50%;
  // left: 50%;
  width: 80%;
  // height: f_times(12);
  // margin-left: -5%;
  // margin-top: -(@height / 2);
  // min-height: f_times(1);
  // max-height: 80%;
  margin: 0 auto;
  background-color: #fff;
  line-height: f_times(1.5);
  border-radius: 4px;
  >div
    box-sizing: border-box;
  >.title
    padding: f_times(1);
    height: f_times(1.5);
    width: 100%;
    margin-bottom: f_times(1);
  >.fblue
    padding: f_times(1);
    color: #3879D9;
    border-top: 1px solid #f2f2f2;
    margin-top: f_times(0.1);
  >.content
    padding: f_times(1);
    width: 100%;
    word-wrap: break-word;
    // height: f_times(6);
    max-height: f_times(20);
    overflow-y: scroll;
</style>